<template>
    <div class="v-pd-40">
        <Card :bordered="false" dis-hover class="ivu-mt" >
            <Form :model="createData" ref="create" :label-width="80">
                <row>
                    <Col span="7">
                        <FormItem label="日期" prop="start_time" >
                            <DatePicker type="daterange"  format="yyyy-MM-dd" placeholder="创建时间" v-model="createData.start_time" @on-change="sumber"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="归属人" prop="belong_member_id">
                            <Select v-model="createData.belong_member_id" multiple :max-tag-count="3" :disabled="createDataType"  @on-change="sumber" >
                                <Option  v-for="item in basicsData.member_list" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="来源" prop="source_channel_id">
                            <Select v-model="createData.source_channel_id" multiple :max-tag-count="3"  @on-change="sumber">
                                <Option v-for="item in basicsData.source_channel_list" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="15">
                        <FormItem label="就诊类型" prop="outpatient_type_id">
                            <Checkbox
                                    :indeterminate="indeterminate"
                                    :value="checkAll"
                                    style="display: inline-block"
                                    @click.prevent.native="handleCheckAll">全部</Checkbox>
                            <CheckboxGroup v-model="createData.outpatient_type_id" @on-change="checkAllGroupChange">
                                <Checkbox v-for="item in basicsData.outpatient_type_list" :key="item.id" :label="item.id">{{ item.name }}</Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="诊室" prop="clinic_id">
                            <Select v-model="createData.clinic_id" @on-change="selectTimeImage" filterable multiple :max-tag-count="3">
                                <Option v-for="item in basicsData.clinic_list" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </row>
                <row>
                    <Col span="8">
                        <FormItem label="标签" prop="tags_ids">
                            <Select v-model="createData.tags_ids" multiple :max-tag-count="5"  @on-change="sumber">
                                <OptionGroup v-for="item in basicsData.tags_list" :key="item.id" :label="item.name">
                                    <Option v-for="items in item.children" :value="items.id" :key="items.id">{{ items.name }}</Option>
                                </OptionGroup>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="效果类型" prop="effect_type_id"  >
                            <Select v-model="createData.effect_type_id" multiple :max-tag-count="4" @on-change="sumber">
                                <Option v-for="item in basicsData.effect_type_list" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="风控类型" prop="risk_type_id">
                            <Select v-model="createData.risk_type_id" multiple :max-tag-count="5" @on-change="sumber">
                                <Option v-for="item in basicsData.risk_type_list" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </row>
            </Form>
            <Divider />
            <DescriptionList title="筛选结果" :col="2">
                <row>
                    <Col span="6">
                        <Description term="筛选用户数：">{{ resultData.total }}</Description>
                    </Col>
                    <Col span="15">
                        <Description term="分配给：" >
                            <Select v-model="batchData" multiple :max-tag-count="3">
                                <Option v-for="item in basicsData.member_list" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </Description>
                        <Description >
                            <Button type="primary" @click="handleBatchSubmitPatient">确认分配</Button>
                        </Description>
                    </Col>
                </row>
            </DescriptionList>
        </Card>
    </div>
</template>

<script>
    import { BatchPatient, ScreenPatient, ScreenBasicsPatient, searchCity } from '@api/patient';
    import dayjs from 'dayjs'
    export default {
        name: 'index',
        data () {
            return {
                createDataType: false,
                createData: {
                    source_channel_id: [],
                    belong_member_id: [],
                    gender: '',
                    outpatient_type_id: [],
                    start_time: [], // 时间选择
                    tags_ids: [],
                    effect_type_id: [],
                    risk_type_id: [],
                    city_id: [],
                    min_age: '',
                    max_age: '',
                    is_seas_patient: false,
                    clinic_id: []
                },
                showData: {
                    source: [],
                    belong: [],
                    gender: '',
                    outpatient: [],
                    start_time: '', // 时间选择
                    end_time: '',
                    tags: [],
                    effect: [],
                    risk: [],
                    city: [],
                    min_age: '',
                    max_age: '',
                    is_seas_patient: false
                },
                batchData: [],
                city_list: [],
                basicsData: {
                    source_channel_list: [],
                    gender_list: [],
                    tags_list: [],
                    member_list: [],
                    effect_type_list: [],
                    risk_type_list: [],
                    outpatient_type_list: [],
                    clinic_list: []
                },
                resultData: {
                    total: '',
                    list: []
                },
                indeterminate: false,
                checkAll: false
            }
        },
        created () {
            ScreenPatient().then(res => {
                this.handleShowResult()
                this.resultData = res
            })
        },
        mounted () {
            this.getBasicsData()
        },
        methods: {
            sumber (e) {
                this.handleScreenSubmit()
            },
            handleBatchSubmitPatient () {
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否确认分配？',
                    onOk: () => {
                        if (this.resultData.list && this.resultData.list.length > 0 && this.batchData.length > 0) {
                            let idArr = this.resultData.list.map((item) => item.id)
                            BatchPatient({
                                ids: idArr.join(','),
                                belong_member_ids: this.batchData.join(',')
                            }).then(() => {
                                this.$refs.create.resetFields()
                                this.indeterminate = false
                                this.checkAll = false
                                this.batchData = []
                                this.showData = {
                                    source: [],
                                    belong: [],
                                    gender: '',
                                    outpatient: [],
                                    start_time: '',
                                    end_time: '',
                                    tags: [],
                                    effect: [],
                                    risk: [],
                                    city: [],
                                    min_age: '',
                                    max_age: '',
                                    is_seas_patient: true
                                }
                                this.$Message.success('分配成功！')
                                this.handleScreenSubmit()
                            })
                        } else {
                            this.$Message.warning('信息不完善，无法提交！')
                        }
                    },
                    onCancel: () => {}
                })
            },
            // 远程搜索
            handleQueryText (query) {
                if (query !== '') {
                    setTimeout(() => {
                        searchCity({
                            keywords: query
                        }).then(res => {
                            const list = res.list.map(item => {
                                return {
                                    key: item.id + query,
                                    id: item.id,
                                    name: item.name
                                };
                            })
                            this.city_list = list
                        })
                    }, 200)
                }
            },
            // 切换开关
            handleChangeSwitch (e) {
                if (e === true) {
                    this.createData.belong_member_id = []
                    this.createDataType = true
                } else {
                    this.createDataType = false
                }
            },
            checkAllGroupChange (data) {
                if (data.length === this.basicsData.outpatient_type_list.length) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
                this.handleScreenSubmit()
            },
            // 全选
            handleCheckAll () {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;
                if (this.checkAll) {
                    this.createData.outpatient_type_id = this.basicsData.outpatient_type_list.map(item => item.id)
                } else {
                    this.createData.outpatient_type_id = []
                }
                this.handleScreenSubmit()
            },
            // 重置表单
            handleResetForm () {
                this.checkAll = false
                this.$refs.create.resetFields()
            },
            // 筛选
            handleScreenSubmit () {
                let sendData = JSON.parse(JSON.stringify(this.createData))
                sendData.source_channel_id = sendData.source_channel_id.length > 0 ? sendData.source_channel_id.join(',') : ''
                sendData.belong_member_id = sendData.belong_member_id.length > 0 ? sendData.belong_member_id.join(',') : ''
                sendData.outpatient_type_id = sendData.outpatient_type_id.length > 0 ? sendData.outpatient_type_id.join(',') : ''
                sendData.tags_ids = sendData.tags_ids.length > 0 ? sendData.tags_ids.join(',') : ''
                sendData.effect_type_id = sendData.effect_type_id.length > 0 ? sendData.effect_type_id.join(',') : ''
                sendData.risk_type_id = sendData.risk_type_id.length > 0 ? sendData.risk_type_id.join(',') : ''
                sendData.clinic_id = sendData.clinic_id.join(',')
                if (sendData.city_id.length > 0) {
                    let arr = []
                    sendData.city_id.forEach(item => {
                        arr.push(item.slice(0, 6))
                    })
                    sendData.city_id = arr.join(',')
                } else {
                    sendData.city_id = ''
                }
                sendData.start_time = this.createData.start_time[0] !== '' ? dayjs(this.createData.start_time[0]).format('YYYY-MM-DD') : ''
                sendData.end_time = this.createData.start_time[1] !== '' ? dayjs(this.createData.start_time[1]).format('YYYY-MM-DD') : ''
                sendData.is_seas_patient = sendData.is_seas_patient === true ? '1' : '0'
                ScreenPatient(sendData).then(res => {
                    this.handleShowResult()
                    this.resultData = res
                })
            },
            // 数据处理展示
            handleShowResult () {
                this.showData = []
                let sendData = JSON.parse(JSON.stringify(this.createData))
                this.showData.start_time = sendData.start_time[0] !== '' ? dayjs(this.createData.start_time[0]).format('YYYY-MM-DD') : ''
                this.showData.end_time = sendData.start_time[1] !== '' ? dayjs(this.createData.start_time[1]).format('YYYY-MM-DD') : ''
                if (sendData.source_channel_id.length > 0) {
                    this.showData.source = this.basicsData.source_channel_list.filter(item => {
                        return sendData.source_channel_id.indexOf(item.id) !== -1
                    })
                }
                if (sendData.belong_member_id.length > 0) {
                    this.showData.belong = this.basicsData.member_list.filter(item => {
                        return sendData.belong_member_id.indexOf(item.id) !== -1
                    })
                }
                switch (sendData.gender) {
                case 0 :
                    this.showData.gender = '不详'
                    break
                case 1 :
                    this.showData.gender = '男'
                    break
                case 2 :
                    this.showData.gender = '女'
                    break
                default:
                    this.showData.gender = ''
                }
                if (sendData.outpatient_type_id.length > 0) {
                    this.showData.outpatient = this.basicsData.outpatient_type_list.filter(item => {
                        return sendData.outpatient_type_id.indexOf(item.id) !== -1
                    })
                }
                if (sendData.tags_ids.length > 0) {
                    this.showData.tags = []
                    this.basicsData.tags_list.forEach(item => {
                        item.children.filter(items => {
                            if (sendData.tags_ids.indexOf(items.id) !== -1) {
                                this.showData.tags.push(items)
                            }
                        })
                    })
                }
                if (sendData.effect_type_id.length > 0) {
                    this.showData.effect = this.basicsData.effect_type_list.filter(item => {
                        return sendData.effect_type_id.indexOf(item.id) !== -1
                    })
                }
                if (sendData.risk_type_id.length > 0) {
                    this.showData.risk = this.basicsData.risk_type_list.filter(item => {
                        return sendData.risk_type_id.indexOf(item.id) !== -1
                    })
                }
                if (sendData.city_id.length > 0) {
                    this.showData.city = this.basicsData.city_list.filter(item => {
                        return sendData.city_id.indexOf(item.key) !== -1
                    })
                }
                this.showData.min_age = sendData.min_age
                this.showData.max_age = sendData.max_age
            },
            // 获取基本数据
            getBasicsData () {
                ScreenBasicsPatient().then(res => {
                    // this.basicsData = res.condition
                    for (let key in this.basicsData) {
                        if (res.condition[key]) {
                            this.basicsData[key] = res.condition[key]
                        } else {
                            this.basicsData[key] = []
                        }
                    }
                    this.basicsData.city_list = []
                })
            },
            // 根据诊室查询
            selectTimeImage (e) {
                this.handleScreenSubmit()
            }
        }
    }
</script>

<style scoped lang="less">
    /deep/.ivu-select-multiple .ivu-select-selection .ivu-select-placeholder {
        min-height: 32px;
    }
    .ivu-checkbox-group {
        display: inline-block;
    }
    .only-height-set {
        min-height: 46px;
    }
    .v-pd-40 {
        padding-bottom:10px;
    }
</style>
